<template>

<el-row :gutter="20">
    <el-col :span="4">
      <div class="so-hot-words">
        <div  class="hw-hd">
            <div class="hw-hd-lt" style="text-align: center;">相关话题</div>
        </div>
        <div class="hw-bd">
            <ul class="clearfix">
                <li  v-for="v in recommended_topic" :key="v.id">
                    <a  @click="fetchData(v.id)" style=" font-size: 18px;">{{v.title}}</a>
                    <el-divider />
                </li>
            </ul>
        </div>
    </div>

    </el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple" />
      <div class="topic-page">
        <!-- 话题部分 -->
        <div class="topic">
          <h2>{{ topiclist.title }}</h2>
          <p class="topic-content">{{ topiclist.content }}</p>
          <div class="topic-info">
            <p>作者: {{ topiclist.publisher_name }}</p>
            <p>发布时间: {{ topiclist.publish_time }}</p>
          </div>
        </div>
      
        <!-- 评论部分 -->
        <div class="comments">
          <h3>评论区</h3>
          <ul>
            <li v-for="comment in comments" :key="comment.id" class="comment">
              <div class="comment-header">
                <span class="comment-author">{{ comment.topic_publisher
                }}</span>
                <span class="comment-time">{{ comment.publish_time }}</span>
              </div>
              <p class="comment-content">{{ comment.content }}</p>
            </li>
          </ul>
      
          <!-- 发表评论表单 -->
          <form @submit.prevent="submitComment" class="comment-form">
            <textarea v-model="newCommentText" placeholder="在这里输入评论"></textarea>
            <button type="submit">发表评论</button>
          </form>
        </div>
      </div>
    
    </el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" />

    </el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
const token = localStorage.getItem('token')
const route = useRoute()
const router = useRouter()
const topiclist = ref([])
const comments = ref([])
const recommended_topic = ref([])
console.log(comments)
const newCommentText = ref('');

const fetchData = async (id) => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/api/topic_details/', {
      topicid: id,  // Sending topic id to the backend
      token: token,
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });

    topiclist.value = response.data.topic
    recommended_topic.value = response.data.recommended_topic
    comments.value = response.data.comments
  } catch (error) {
    console.error('Error fetching data', error)
  }
}

const submitComment = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/api/submit_comment/', {
      topic_id: route.params.id, // 替换为你要评论的话题的ID
      content: newCommentText.value,
      token: token,
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    // 处理成功响应，比如刷新评论列表等操作
    console.log(response.data.message);
    window.location.reload(); // 重新加载页面

  } catch (error) {
    // 处理请求错误，比如显示错误消息
    console.error('提交评论失败:', error);
  }
}

onMounted(async () => {
  if (!token) {
    // 如果 token 不存在，则提示用户未登录，并跳转到登录页面
    alert('您还未登录，请先登录！')
    router.push({ path: '/' })
  } else {
    // 如果 token 存在，则继续获取数据
    await fetchData(route.params.id);
  }
});


</script>

<style>
.topic-link {
  font-size: 18px;
  display: inline-block;
  width: 200px; /* 设置链接的最大宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.so-hot-words{
  margin-top: 20px;
  margin-left: 20%;
  padding-bottom: 8px;
  padding-top: 16px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 2px;
}
.so-hot-words .hw-hd{
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 16px 12px;
  border-bottom: 1px solid #f0f0f2;
}
.so-hot-words .hw-hd .hw-hd-lt {
  flex: 1;
  font-size: 20px;
}


.topic-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.topic {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.topic h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.topic-content {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.topic-info p {
  margin: 5px 0;
  font-size: 16px;
}

.comments {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 20px;
}

.comments h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.comment {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-author {
  font-weight: bold;
}

.comment-time {
  color: #666;
}

.comment-content {
  font-size: 16px;
  line-height: 1.5;
}

.comment-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  resize: vertical;
}

.comment-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.comment-form button:hover {
  background-color: #0056b3;
}

</style>